<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        v-model="form"
        :permission="permissionList"
        v-bind="bindVal"
        v-on="onEvent"
        :page.sync="page"
      >
        <template slot="menuLeft">
          <el-button type="primary" size="small" @click="myAdd">添加</el-button>
          <el-button type="primary" size="small" @click="delBatchs"
            >删除</el-button
          >
          <el-button type="primary" size="small" @click="handleExport"
            >导出</el-button
          >
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button
            icon="el-icon-check"
            :size="scope.size"
            :type="scope.type"
            v-if="scope.row.approvalStatus == '0'"
            @click="myEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            icon="el-icon-check"
            :size="scope.size"
            :type="scope.type"
            @click="myView(scope.row)"
            >预览</el-button
          >
        </template>
      </avue-crud>
      <el-dialog
        :visible.sync="addVisableDialog"
        :fullscreen="addchangeDialogFlag"
        :close-on-click-modal="false"
        width="70%"
      >
        <div slot="title">
          <div>
            <span class="el-dialog__title">添 加</span>
            <div class="avue-crud__dialog__menu">
              <button
                class="el-dialog__headerbtn"
                style="margin-right:20px"
                @click="addchangeDialog"
              >
                <i class="el-dialog__close el-icon-full-screen"></i>
              </button>
            </div>
            <button
              type="button"
              aria-label="Close"
              class="el-dialog__headerbtn"
            >
              <i class="el-dialog__close el-icon el-icon-close"></i>
            </button>
          </div>
        </div>
        <el-form>
          <el-tabs v-model="active" type="card">
            <el-tab-pane label="现金支付录入" name="1">
              <cash ref="cash" :cashData="tableDataCash" myType="0"></cash>
            </el-tab-pane>
            <el-tab-pane label="电子支付录入" name="2">
              <ele ref="ele" :eleData="tableDataEle" myType="0"></ele>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-dialog>
      <el-dialog
        :visible.sync="editVisableDialog"
        :fullscreen="editchangeDialogFlag"
        :close-on-click-modal="false"
        width="70%"
      >
        <div slot="title">
          <div>
            <span class="el-dialog__title">编 辑</span>
            <div class="avue-crud__dialog__menu">
              <button
                class="el-dialog__headerbtn"
                style="margin-right:20px"
                @click="editchangeDialog"
              >
                <i class="el-dialog__close el-icon-full-screen"></i>
              </button>
            </div>
            <button
              type="button"
              aria-label="Close"
              class="el-dialog__headerbtn"
            >
              <i class="el-dialog__close el-icon el-icon-close"></i>
            </button>
          </div>
        </div>
        <el-form>
          <el-tabs v-model="active" type="card">
            <el-tab-pane label="现金支付录入" name="1">
              <cash
                ref="cash"
                :cashData="tableDataCash"
                myType="1"
                :tvmCode="formAdd.swStTvmDailyBill.tvmCode"
              ></cash>
            </el-tab-pane>
            <el-tab-pane label="电子支付录入" name="2">
              <ele
                ref="ele"
                :eleData="tableDataEle"
                myType="1"
                :tvmCode="formAdd.swStTvmDailyBill.tvmCode"
              ></ele>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-dialog>
      <el-dialog
        :visible.sync="viewVisableDialog"
        :fullscreen="viewchangeDialogFlag"
        width="70%"
      >
        <div slot="title">
          <div>
            <span class="el-dialog__title">预 览</span>
            <div class="avue-crud__dialog__menu">
              <button
                class="el-dialog__headerbtn"
                style="margin-right:20px"
                @click="viewchangeDialog"
              >
                <i class="el-dialog__close el-icon-full-screen"></i>
              </button>
            </div>
            <button
              type="button"
              aria-label="Close"
              class="el-dialog__headerbtn"
            >
              <i class="el-dialog__close el-icon el-icon-close"></i>
            </button>
          </div>
        </div>
        <el-form>
          <el-tabs v-model="active" type="card">
            <el-tab-pane label="现金支付录入" name="1">
              <avue-crud
                :data="tableDataCash"
                :option="tableOptionCash"
                title="现金支付"
              ></avue-crud>
              <el-form>
                <el-form-item label="备注">
                  <el-input
                    type="textarea"
                    v-model="remark"
                    :rows="5"
                    disabled="false"
                  ></el-input>
                </el-form-item>
              </el-form>
              <!-- <cash :cashData="tableDataCash"></cash> -->
            </el-tab-pane>
            <el-tab-pane label="电子支付录入" name="2">
              <avue-crud
                :data="tableDataEle"
                :option="tableOptionEle"
                title="电子支付"
              ></avue-crud>
            </el-tab-pane>
          </el-tabs>
          <div class="bottom-menu">
            <el-button type="primary" @click="closeDialog()">取消</el-button>
          </div>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import baseCrud from "@/mixins/base-crud";
import cash from "./cash";
import ele from "./ele";
import {
  getObj,
  delBatch
} from "@/api/subwaystm/swsttvmdailybill/swsttvmdailybill";
import { tableOptionEle } from "@/const/crud/subwaystm/swsttvmdailybill/swsttvmdailybillelectronicpay";
import { tableOptionCash } from "@/const/crud/subwaystm/swsttvmdailybill/swsttvmdailybillcashpay";
import { dateFormat } from "@/util/date";

export default {
  name: "swsttvmdailybill",
  mixins: [baseCrud("subwaystm/swsttvmdailybill/swsttvmdailybill")],
  provide() {
    return {
      closeDialog: this.closeDialog
    };
  },
  components: {
    cash,
    ele
  },
  data() {
    return {
      tableOptionEle: tableOptionEle,
      tableOptionCash: tableOptionCash,
      active: "1",
      addVisableDialog: false,
      addchangeDialogFlag: false,
      editVisableDialog: false,
      editchangeDialogFlag: false,
      viewVisableDialog: false,
      viewchangeDialogFlag: false,
      tableDataCash: [],
      tableDataEle: [],
      searchForm:{
        approvalStatus:'0'
      },
      formAdd: {
        swStTvmDailyBill: {},
        swStTvmDailyBillElectronicPays: [],
        swStTvmDailyBillCashPays: []
      },
      remark: ""
    };
  },
  computed: {
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.swsttvmdailybill_add, false),
        delBtn: this.vaildData(this.permissions.swsttvmdailybill_del, false),
        editBtn: this.vaildData(this.permissions.swsttvmdailybill_edit, false)
      };
    }
  },
  methods: {
    rowAdd: function() {
      callback({
        startTime: dateFormat(new Date()),
        endTime: dateFormat(new Date())
      });
    },
    delBatchs: function() {
      if (this.$refs.crud.tableSelect.length < 1) {
        this.$message.error("请选择数据");
        return false;
      }
      let ids = [];
      for (const table of this.$refs.crud.tableSelect) {
        if (table.approvalStatus != "0") {
          this.$message.error("请检查数据，只能删除未提交的");
          return false;
        }
        ids.push(table.id);
      }
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delBatch(ids)
          .then(data => {
            this.$message.success("删除成功");
            this.getList(this.page);
            done();
          })
          .catch(() => {
            loading();
          });
      });
    },
    myAdd: function() {
      //   this.formAdd.swStHandworkCleanRecord = {};
      //   this.tableDataAdd = [];
      //   console.log(this.formAdd.swStHandworkCleanRecord.payPersonName)

      this.tableDataCash = [];
      this.tableDataEle = [];
      this.addVisableDialog = true;
      this.$nextTick(() => {
        this.$refs.cash.btn = false;
        this.$refs.ele.btn = false;
        this.$refs.cash.oneShow = true;
        this.$refs.cash.rowNew = true;
        this.$refs.ele.oneShow = true;
        this.$refs.ele.rowNew = true;
      });
    },
    myView: function(row) {
      getObj(row.id).then(response => {
        let res = response.data.data;
        this.tableDataCash = res.swStTvmDailyBillCashPays;
        this.tableDataEle = res.swStTvmDailyBillElectronicPays;
        this.formAdd.swStTvmDailyBill = res.swStTvmDailyBill;
        this.remark = res.swStTvmDailyBill.remark;
      });
      this.viewVisableDialog = true;
    },
    myEdit: function(row) {
      //this.tableDataCash.startTime = dateFormat(new Date());
      //this.tableDataCash.endTime = dateFormat(new Date());
      getObj(row.id).then(response => {
        let res = response.data.data;
        this.tableDataCash = res.swStTvmDailyBillCashPays;
        for (const item of this.tableDataCash) {
          item.$cellEdit = true;
        }
        this.tableDataEle = res.swStTvmDailyBillElectronicPays;
        for (const item of this.tableDataEle) {
          item.$cellEdit = true;
        }
        this.formAdd.swStTvmDailyBill = res.swStTvmDailyBill;
      });
      this.editVisableDialog = true;
      this.$nextTick(() => {
        this.$refs.cash.btn = false;
        this.$refs.ele.btn = false;
      });
    },
    addchangeDialog: function() {
      if (this.addchangeDialogFlag) {
        this.addchangeDialogFlag = false;
      } else {
        this.addchangeDialogFlag = true;
      }
    },
    editchangeDialog: function() {
      if (this.editchangeDialogFlag) {
        this.editchangeDialogFlag = false;
      } else {
        this.editchangeDialogFlag = true;
      }
    },
    viewchangeDialog: function() {
      if (this.viewchangeDialogFlag) {
        this.viewchangeDialogFlag = false;
      } else {
        this.viewchangeDialogFlag = true;
      }
    },
    closeDialog() {
      this.addVisableDialog = false;
      this.viewVisableDialog = false;
      this.editVisableDialog = false;
      this.getList(this.page);
    }
  }
};
</script>

<style lang="scss" scoped>
.bottom-menu {
  margin-top: 48px;
  text-align: center;
}
</style>
